<template>
  <div class="product">
    <Header />
    
    <!-- 产品介绍 -->
    <section class="product-hero section">
      <div class="container">
        <div class="product-hero-content">
          <div class="product-info">
            <h1 class="product-title">智能企业管理平台</h1>
            <p class="product-description">一站式企业数字化解决方案，集成项目管理、客户关系管理、数据分析等核心功能，助力企业提升运营效率。</p>
            <div class="product-features">
              <div class="feature-item">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M5 13l4 4L19 7" stroke="#28a745" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                <span>实时数据同步</span>
              </div>
              <div class="feature-item">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M5 13l4 4L19 7" stroke="#28a745" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                <span>多端协同办公</span>
              </div>
              <div class="feature-item">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M5 13l4 4L19 7" stroke="#28a745" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                <span>智能报表分析</span>
              </div>
            </div>
            <router-link to="/contact" class="btn">申请试用</router-link>
          </div>
          <div class="product-image">
            <div class="placeholder-image">
              <svg width="400" height="300" viewBox="0 0 400 300" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect width="400" height="300" fill="#f0f0f0"/>
                <rect x="50" y="50" width="300" height="200" fill="#e0e0"/>
                <circle cx="200" cy="150" r="40" fill="#d0d0d0"/>
              </svg>
              <p>产品界面展示</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 核心功能 -->
    <section class="core-features section">
      <div class="container">
        <h2 class="section-title">核心功能</h2>
        <div class="features-grid">
          <div class="feature-card">
            <div class="feature-icon">
              <svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z" stroke="#007bff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </div>
            <h3>项目管理</h3>
            <p>完整的项目生命周期管理，从立项到交付一站式解决</p>
          </div>
          <div class="feature-card">
            <div class="feature-icon">
              <svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2" stroke="#007bff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M9 11a4 4 0 100-8 4 4 0 000 8z" stroke="#007bff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </div>
            <h3>客户关系</h3>
            <p>智能化客户管理，提升客户满意度和转化率</p>
          </div>
          <div class="feature-card">
            <div class="feature-icon">
              <svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 20h9" stroke="#007bff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M16.5 3.5a2.121 2.121 0 013 3L7 19l-4 1 1-4L16.5 3.5z" stroke="#007bff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </div>
            <h3>数据分析</h3>
            <p>多维度数据可视化，助力决策制定</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 技术规格 -->
    <section class="tech-specs section">
      <div class="container">
        <h2 class="section-title">技术规格</h2>
        <div class="specs-content">
          <div class="spec-item">
            <h4>系统要求</h4>
            <ul>
              <li>操作系统: Windows 10+/macOS 10.14+/Linux</li>
              <li>浏览器: Chrome 80+/Firefox 75+/Safari 13+</li>
              <li>网络: 稳定的互联网连接</li>
              <li>存储: 最低2GB可用空间</li>
            </ul>
          </div>
          <div class="spec-item">
            <h4>部署方式</h4>
            <ul>
              <li>云端SaaS服务</li>
              <li>私有化部署</li>
              <li>混合云部署</li>
              <li>API集成</li>
            </ul>
          </div>
        </div>
      </div>
    </section>

    <Footer />
  </div>
</template>

<script>
import Header from './Header.vue'
import Footer from './Footer.vue'

export default {
  name: 'Product',
  components: {
    Header,
    Footer
  }
}
</script>

<style scoped>
.product-hero {
  padding: 120px 0 80px;
  margin-top: 80px;
  background-color: #f8f9fa;
}

.product-hero-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
 align-items: center;
}

.product-info h1 {
  font-size: 2.5rem;
  margin-bottom: 20px;
  color: #333;
}

.product-description {
  font-size: 1.1rem;
  color: #666;
  margin-bottom: 30px;
  line-height: 1.6;
}

.product-features {
  margin-bottom: 40px;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
  color: #28a745;
  font-weight: 500;
}

.product-image {
  display: flex;
  justify-content: center;
  align-items: center;
}

.placeholder-image {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.placeholder-image p {
  margin-top: 10px;
  color: #666;
}

.core-features {
  background: white;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
}

.feature-card {
  text-align: center;
  padding: 40px 20px;
  border-radius: 8px;
  background: #f8f9fa;
  transition: transform 0.3s;
}

.feature-card:hover {
  transform: translateY(-5px);
}

.tech-specs {
  background-color: #f8f9fa;
}

.specs-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
}

.spec-item h4 {
  margin-bottom: 20px;
  color: #333;
  font-size: 1.3rem;
}

.spec-item ul {
  list-style: none;
}

.spec-item ul li {
  padding: 8px 0;
  border-bottom: 1px solid #dee2e6;
  color: #666;
}

.spec-item ul li:last-child {
  border-bottom: none;
}

@media (max-width: 768px) {
  .product-hero {
    padding: 100px 0 60px;
  }
  
  .product-hero-content {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  
  .product-info h1 {
    font-size: 2rem;
  }
}
</style>
